<!-- 订单详情 -->
<template>
  <el-dialog v-model="dialogVisible" title="订单详情" width="1000px" :before-close="handleClose">
    <el-table :data="orderDetailList" style="width: 100%">
      <el-table-column prop="orderId" label="订单ID" width="100" />
      <el-table-column prop="userId" label="用户ID" width="100" />
      <el-table-column prop="orderNumber" label="订单号" width="120" />
      <el-table-column prop="name" label="商品名称" width="150" />
      <el-table-column prop="quantity" label="购买数量" width="100" align="center" />
      <el-table-column prop="price" label="单价" width="100" align="right">
        <template #default="{ row }">
          {{ row.price != null ? row.price.toFixed(2) : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="subtotal" label="小计" width="100" align="right">
        <template #default="{ row }">
          {{ row.quantity * row.price }}
        </template>
      </el-table-column>
      <el-table-column prop="orderType" label="订单类型" width="100">
        <template #default="{ row }">
          <el-tag size="small" :type="row.orderType === '外带' ? 'warning' : 'info'">
            {{ row.orderType }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="orderStatus" label="订单状态" width="100">
        <template #default="{ row }">
          <el-tag :type="getOrderStatusType(row.orderStatus)">
            {{ row.orderStatus }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="orderDate" label="下单时间" width="160">
        <template #default="{ row }">
          {{ formatDate(row.orderDate) }}
        </template>
      </el-table-column>
      <el-table-column prop="pickDate" label="取餐时间" width="160">
        <template #default="{ row }">
          {{ formatDate(row.pickDate) }}
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, defineProps, defineEmits } from 'vue'

const props = defineProps({
  modelValue: Boolean,
  orderDetailList: {
    type: Array,
    default: () => []
  }
})

const emits = defineEmits(['update:modelValue'])

// 计算属性用于控制对话框显示
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emits('update:modelValue', value)
})

// 获取订单状态对应的标签类型
const getOrderStatusType = (status) => {
  const typeMap = {
    '未完成': 'warning',
    '已付款': 'info',
    '已发货': 'primary',
    '完成': 'success'
  }
  return typeMap[status] || ''
}

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
}

const handleClose = () => {
  emits('update:modelValue', false)
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
  margin-top: 20px;
}

:deep(.el-dialog__body) {
  padding: 20px;
}

.price {
  color: #ff4500;
  font-weight: bold;
}
</style>